<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>复选框</title>
    <style>
        td {
            text-align: center;
        }

        table {
            margin: auto;
        }


    </style>
</head>
<body>
<table border="1px" cellspacing="0" width="550px">
    <tr>
        <th><input type="checkbox" id="selectAll"></th>
        <th>用户名</th>
        <th>密码</th>
    </tr>
    <tr>

        <td><input type="checkbox" name="ids" value="1"></td>
        <td>路飞</td>
        <td>222</td>
    </tr>
    <tr>
        <td><input type="checkbox" name="ids" value="2"></td>
        <td>索隆</td>
        <td>333</td>
    </tr>
    <tr>
        <td><input type="checkbox" name="ids" value="3"></td>
        <td>索隆</td>
        <td>333</td>
    </tr>
    <tr>
        <td>
            <a href="javaScript:fun1()">反选</a>
            <a href="javaScript:fun2()">删除</a>
        </td>
        <td></td>
        <td></td>
    </tr>
</table>
</body>
<script>
    // 1 绑定全选点击事件
    document.getElementById("selectAll").onclick = function () {
        // 2 获取要操作的复选框
        let cks = document.getElementsByName("ids");
        // 3 遍历复选框的数组
        for (let i = 0; i < cks.length; i++) {
            cks[i].checked = this.checked;
        }
    };

    //1.复选框反选操作
    function fun1() {
        // 2 获取要操作的复选框
        let cks = document.getElementsByName("ids");
        // 3 遍历复选框的数组
        for (let i = 0; i < cks.length; i++) {
            cks[i].checked = !cks[i].checked;
        }
        ;

    }

    // 1删除选中的复选框
    function fun2() {
        //定义一个数组接收选中的复选框数据
        let arr = new Array();
        // 2 获取要操作的复选框
        let cks = document.getElementsByName("ids");
        // 3 遍历复选框的数组
        for (let i = 0; i < cks.length; i++) {
            //4 获取选中的复选框
            // 判断复选框是否被选中
            if (cks[i].checked) {
                arr.push(cks[i]);
            }
        }

        for (let j=0;j<arr.length;j++){
            let table = arr[j].parentElement.parentElement.parentElement;
            let tr = arr[j].parentElement.parentElement;
            table.removeChild(tr);
        }
    };


</script>
</html>